@for

@for 在 sass 中有兩種方式可以循環:

• $var:為自行設定的參數
• start:為迴圈起始值
• end:為迴圈值結束值

1. @for $var from <start> through <end>

// scss //
@for $var from 1 through 3 {    // 變數名稱為 $var，起始值為 1，終止值為 3 。//
  .mt-#{$var} {   // #{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。 //
    margin-top: $var * 10px;
  }
}

編｜
譯｜
後｜
　Ｖ

// css //
.mt-1 {  // 迴圈第一次 //
  margin-top: 10px;
}

.mt-2 {  // 迴圈第二次 //
  margin-top: 20px;
}

.mt-3 {  // 迴圈第三次 //
  margin-top: 30px;
}

2. @for $var from <start> to <end>

// scss //
@for $var from 1 to 3 {   // 變數名稱為 $var，起始值為 1，終止值為 3 。//
  .mt-#{$var} {   // #{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。 //
    margin-top: $var * 10px;
  }
}

編｜
譯｜
後｜
　Ｖ

// css //
.mt-1 {   // 迴圈第一次 //
  margin-top: 10px;
}

.mt-2 {   // 迴圈第二次 //
  margin-top: 20px;
}

*through 與 to 的差異在於 是否包含結束值。through 包含結束值，to 不包含結束值。

那怎麼應用@for在網格系統呢?

以through為例:

// scss //
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

編｜
譯｜
後｜
　Ｖ

// css //
.span12, .span11, .span10, .span9, .span8, .span7, .span6, .span5, .span4, .span3, .span2, .span1 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.span1 {
  width: 60px;
}

.span2 {
  width: 140px;
}

.span3 {
  width: 220px;
}

.span4 {
  width: 300px;
}

.span5 {
  width: 380px;
}

.span6 {
  width: 460px;
}

.span7 {
  width: 540px;
}

.span8 {
  width: 620px;
}

.span9 {
  width: 700px;
}

.span10 {
  width: 780px;
}

.span11 {
  width: 860px;
}

.span12 {
  width: 940px;
}